<template>
  <Tabs
    v-model="activeKey"
    type="editable-card"
    :hide-add="true"
    class="pc-view-tabs pc-h-full"
    @tabClick="tabClick"
    @edit="closeTab">
    <TabPane
      v-for="(view) in tabViewsNew"
      :key="view.path"
      :tab="view?.meta?.title"
      :closable="closable">
      <div
        class="pc-h-full pc-w-full pc-overflow-y-auto"
        :class="!view.meta.haveMainTitle ? ['pc-p-4', 'pc-pt-3'] : ''">
        <!-- <keep-alive>
        </keep-alive> -->
        <template v-if="view?.meta.isIframe">
          <slot name="iframe" :view="view" ></slot>
        </template>
        <template v-else>
          <component
            :is="h(view.component)"
            :key="view.path" />
        </template>
      </div>
    </TabPane>
  </Tabs>
</template>
<script setup lang="ts">
import { ref, watch, computed, h } from "vue";
import { isEqual } from 'lodash-es';
import Tabs from "../tabs";
import TabPane from "../tab-pane";
import { useUpdateTabRoutes } from "../../composables/tab-routes"
const props = defineProps({
  router: {
    type: Object,
    default: () => {}
  },
  route: {
    type: Object,
    default: () => {}
  }
})

const newRouter = props.router
const { tabRoutes, activeRoute, addTabRoute, changeTabRoute, deleteTabRoute } = useUpdateTabRoutes(props.router)


const tabViewsNew = ref(tabRoutes)
const activeKey = ref(activeRoute)
let tabClickFlag = ref(false) // 用tabClickFlag区分一下是tab切换还是左侧菜单栏切换菜单

watch(()=>({path:props.route.path, query:props.route.query}), (newVal, oldVal) => {
  console.debug(newVal, '=====', oldVal)
  const { route, router } = props;
  const decodedPath = decodeURIComponent(route.path);

  if (newVal?.path === oldVal?.path && isEqual(newVal?.query, oldVal?.query)) {
    return;
  }
  const existRoute = tabRoutes.value.find(el =>
    decodeURIComponent(el.path) === decodedPath
  );

  if (!existRoute) {
    addTabRoute(route)
    activeKey.value = route.path
    console.log(router.currentRoute.value.path)
    console.log(route.path)
    if (router.currentRoute.value.path !== route.path) {
      router.push(route);
    }
  } else {
    console.debug(tabClickFlag.value, 'tabClickFlag')
    if (!tabClickFlag.value) {
      activeKey.value = route.path
      return
    }

    // 如果路由存在的话判断一下query有没有更新
    // query更新对应路由也要更新
    if (!isEqual(existRoute.query, route.query)) {
      changeTabRoute(route);
    }

    tabClickFlag.value = false
  }
}, {
  immediate: true,
  deep: true
})
const closable = computed(()=> {
  return tabViewsNew.value.length > 1
})

const tabClick = (val:any) => {
  tabClickFlag.value = true
  const currentRoute = tabRoutes.value.find((el:any)=>decodeURIComponent(el.path)===decodeURIComponent(val))
  console.log(currentRoute, 'tabClickcurrentRoute')
  console.log(val, 'tabclickvalue')
  if (currentRoute) {
    const { path, query, params, name, meta } = currentRoute
    const route =  { path, query, params, name, meta }
    console.log('pushroute')
    newRouter.push(route)
  }
}

const closeTab = (activeKeyParam:any, action:string) => {
  const deleteRoute = tabRoutes.value.find((el:any)=>el.path===activeKeyParam)
  const deleteRouteIndex = tabRoutes.value.findIndex((el:any)=>el.path===activeKeyParam)
  const activeRouteIndex = tabRoutes.value.findIndex((el:any)=>el.path===activeKey.value)
  tabClickFlag.value = true
  if (action === 'remove') {
    if (deleteRoute) {
      deleteTabRoute(deleteRoute)
      // 删除的时候判断一下，如果当前tab-删除的tab>1,则不用更新路由和activeKey,否则需要更新路由和activeKey
      if (deleteRouteIndex-activeRouteIndex===1||deleteRouteIndex-activeRouteIndex===-1||deleteRouteIndex===activeRouteIndex) {
        const activeRoute = tabViewsNew.value[deleteRouteIndex>0?deleteRouteIndex-1:0]
        activeKey.value = activeRoute.path
        newRouter.push(activeRoute)
      }
    }
  }
}
</script>
<style>
.pc-view-tabs.ant-tabs>.ant-tabs-nav {
  @apply pc-mb-0 pc-h-[38px];
  @apply pc-border-b pc-border-[#e5e6eb];
  @apply pc-bg-white;
  @apply pc-leading-[38px];
}

.pc-view-tabs.ant-tabs>.ant-tabs-nav .ant-tabs-tab {
  @apply pc-m-0 pc-box-border pc-w-[128px] pc-justify-between pc-px-[12px] pc-py-0;
  @apply pc-rounded-none pc-border-b-2 pc-border-solid pc-border-transparent;
  @apply pc-bg-white hover:pc-bg-[#f7f8fa];
  @apply pc-text-[13px] pc-text-[#4e5969];
}

.pc-view-tabs.ant-tabs>.ant-tabs-nav .ant-tabs-tab::before {
  @apply pc-absolute pc-right-0 pc-h-[16px];
  @apply pc-border-l pc-border-solid pc-border-[#e5e6eb];
  content: " ";
}

.pc-view-tabs.ant-tabs>.ant-tabs-nav .ant-tabs-tab .ant-tabs-tab-remove {
  @apply pc-hidden;
}

.pc-view-tabs.ant-tabs>.ant-tabs-nav .ant-tabs-tab:hover .ant-tabs-tab-remove {
  @apply pc-block;
}

.pc-view-tabs.ant-tabs>.ant-tabs-nav .ant-tabs-tab .ant-tabs-tab-btn {
  @apply pc-overflow-hidden;
  @apply pc-text-ellipsis pc-whitespace-nowrap;
}

.pc-view-tabs.ant-tabs>.ant-tabs-nav .ant-tabs-tab:hover .ant-tabs-tab-btn {
  @apply pc-text-[#4e5969];
}

.pc-view-tabs.ant-tabs>.ant-tabs-nav .ant-tabs-tab-active {
  @apply pc-border-b-2 pc-border-b-[#165dff];
  @apply pc-bg-[#f2f4f7] hover:pc-bg-[#f2f4f7];
}

.pc-view-tabs.ant-tabs>.ant-tabs-nav .ant-tabs-tab-active .ant-tabs-tab-btn {
  @apply pc-text-[#165dff];
  text-shadow: none;
}

.pc-view-tabs.ant-tabs>.ant-tabs-nav .ant-tabs-tab-active:hover .ant-tabs-tab-btn {
  @apply pc-text-[#165dff];
}

.pc-view-tabs.ant-tabs>.ant-tabs-nav .ant-tabs-nav-operations {
  @apply pc-flex pc-w-[48px] pc-justify-center;
}

.pc-view-tabs.ant-tabs>.ant-tabs-nav .ant-tabs-nav-operations .ant-tabs-nav-more {
  @apply pc-flex;
}

.pc-view-tabs.ant-tabs>.ant-tabs-nav .ant-tabs-nav-operations .ant-tabs-nav-more .h-icon {
  @apply pc-h-full pc-p-[4px];
}

.pc-view-tabs.ant-tabs>.ant-tabs-nav .ant-tabs-nav::before {
  @apply pc-border-b-0;
}
</style>
